import cn from "classnames";
import { type StyleValue, defineComponent } from "vue";

export type ButtonVariant =
  | "primary"
  | "secondary"
  | "success"
  | "danger"
  | "warning"
  | "info"
  | "light"
  | "dark"
  | "link";

export type ButtonSize = "lg" | "sm" | "md";

type ButtonProps = {
  class?: any;
  disabled?: boolean;
  outline?: boolean;
  size?: ButtonSize;
  style?: StyleValue;
  type?: "submit" | "reset" | "button" | undefined;
  variant?: ButtonVariant;
};

type ButtonEmits = {
  onClick?: (e: MouseEvent) => void;
};

const Button = defineComponent<ButtonProps & ButtonEmits>({
  emits: ["click"],
  props: ["class", "disabled", "outline", "size", "style", "type", "variant"],
  setup(props, { slots, emit }) {
    const { type, style, variant, outline, size, disabled } = props;

    const handleClick = (e: MouseEvent) => {
      emit("click", e);
    };

    const classes = cn(
      "btn",
      `btn${outline === true ? "-outline" : ""}-${variant || "primary"}`,
      !size || size === "md" ? null : `btn-${size}`,
      props.class,
    );

    console.log({ classes, variant });

    return () => (
      <button class={classes} style={style} type={type || "button"} onClick={handleClick} disabled={disabled}>
        {slots.default?.()}
      </button>
    );
  },
});

export default Button;
